<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>日新网_我的问答</title>
    <link rel="stylesheet" href="__TMPL__Public/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/reset.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/style.css">
    <link rel="stylesheet" href="__PUBLIC__/swiper/swiper.min.css">
    <script type="text/javascript" src="__TMPL__Public/assets/js/rem.js"></script>
    <style>
        .question_index {
            position: relative;
            margin-bottom: 0!important;
        }
        .question_index .title {
            width: 100%;
            text-align: center;
            margin:0 auto!important;
        }
        .questions_btm span:not(:last-child):after {
            content: "、";
        }
        .footer a:nth-child(4) span {
            color: #c8161d;
        }
        .question_index .label {
            position: relative;
            bottom: -.1rem;
            color: #fff;
        }
        .question_index .label .span1 {
            font-style: normal;
            font-size: .22rem;
            color: white;
        }
        .question_index .label span {
            font-size: .22rem;
            height: .36rem;
            width: .56rem;
            padding: .08rem .1rem;
            border-radius: .1rem;
            margin: .1rem;
            letter-spacing: 1px;
        }
        .question_index .active {
            border: 1px solid #fff;
        }
        .swiper-slide {
            width: auto!important;
            text-align: center;
        }
        .act_cat {
            color: #ff6b31!important;
        }
    </style>
</head>
<body>

<!--问答页首页-->
<div class="question_index comWidth">
    <span class="qst_btn"><a href="{:U('Question/Question/add_question')}">提问</a></span>
    <p class="title">日新问答</p>
    <div class="label">
        <div class="swiper-container" id="swiper-container3">
            <div class="swiper-wrapper">
                <volist name="post_categorys" id="vo">
                    <div class="swiper-slide" data-num="{$key}">
                        <a href="{:U('Question/Question/index', ['cat_id' => $vo['id']])}">
                            <span class="span1 {$cat_id == $vo['id'] ? 'act_cat' : ''}">{$vo.name}</span>
                        </a>
                    </div>
                </volist>
            </div>
        </div>
    </div>
</div>
<!--问答-->
<div class="answers question_item">
    <volist name="questions" id="vo">
        <a href="{:U('Question/Question/question_info', ['id' => $vo['id']])}" class="question_a">
            <div class="answers_item">
                <p class="text">{$vo.post_title}</p>
                <div class="picture_ground">
                    <volist name="vo.answers" id="vo_n">
                        <div class="picture_item">
                            <img src="{$vo_n}" alt="" class="my-photo">
                        </div>
                    </volist>
                    <if condition="count($vo['answers']) == 5">
                        <div class="picture_item last_item">
                            <span class="spot"></span>
                        </div>
                    </if>
                </div>
            </div>
        </a>
    </volist>
</div>

<div style="height: .5rem;line-height: .5rem;background-color: #efdddd;" class="js-infinite-scroll-loading text-center">更多</div>
<div id="nextpage"></div>

<!--页脚-->
<tc_include file="Public:footer"/>
<script type="text/javascript" src="__TMPL__Public/assets/js/jquery.1.12.4.js"></script>
<script type="text/javascript" src="__PUBLIC__/swiper/swiper.min.js"></script>
<script src="__TMPL__Public/assets/js/bootstrap.min.js"></script>
<script src="__TMPL__Public/assets/js/jquery.infiniteScroll.js"></script>


<script>
    var act_index = 0;
    $('.span1').each(function (index, item) {
        if ($(this).hasClass('act_cat')) {
            act_index = index;
        }
    })
    var mySwiper = new Swiper('.swiper-container', {
        // slidesPerView: 3.5, //头部一行显示多少个 .5表示显示半个
        spaceBetween: 0, //slide之间的距离（单位px）。
        loop: false, //是否可循环
        initialSlide : act_index, // 设置为2后，Swiper初始化时activeSlide成了第三个
        slidesPerView: "auto",
        /*设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。*/
        freeMode: false,
        /*自动贴合*/
        freeModeSticky: true,
        /*自动贴合。*/
        centeredSlides: false,
        /*设定为true时，活动块会居中，而不是默认状态下的居左。*/
        slideToClickedSlide: true,
        /*设置为true则swiping时点击slide会过渡到这个slide。*/
    });
</script>

<script>
    $(function(){
        $('#nextpage').infiniteScroll({
            loading:'.js-infinite-scroll-loading',
            total_pages:{$count},
            success:function(content){
                var items = $(content).find(".question_a");
                if(items.length > 0){
                    $(".question_item").append(items);
                }
            }
        });
    });
</script>
<script>
    $(function () {
        $(".picture_ground").each(function (index,value) {
            var num = $(value).children().length;
            if(num >= 6){
                $(value).find(".last_item").css("display","block");
            }
        })
    })
</script>
<script src="/public/slow_img/checkImg.js"></script>
</body>
</html>